{% extends "detail.html" %}
{% load i18n static %}
{% block title %}{{ object }}机柜拓扑关系图 | {{ block.super }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">
                    {{ object.name }}机柜拓扑关系图
                </h3>
                <div class="box-tools pull-right">
                    <a href="{{ return_url }}" class="btn btn-sm btn-default">
                        <i class="fa fa-arrow-left"></i> {% trans "Back" %}
                    </a>
                </div>
            </div>
            <div class="box-body">
                {% if error %}
                <div class="alert alert-danger">
                    <i class="fa fa-warning"></i> {{ error }}
                </div>
                {% else %}
                <div id="topology-chart" style="width: 100%; height: 800px;"></div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script src="{% static 'js/echarts.min.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var chartDom = document.getElementById('topology-chart');
    var chart = echarts.init(chartDom, null, {
        renderer: 'svg'
    });
    
    // 图表配置
    var option = {
        title: {
            text: '{% trans "机柜拓扑关系图" %}',
            subtext: '{{ object.name }}',
            top: 'top',
            left: 'center'
        },
        layout: 'none',
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                if (params.dataType === 'edge') {
                    return params.data.value;
                }
                return params.data.name + '<br/>' + params.data.value;
            }
        },
        // animationDurationUpdate: 1500,
        // animationEasingUpdate: 'quinticInOut',
        series: [{
            type: 'graph',
            layout: 'force',
            data: JSON.parse('{{ nodes_json|safe }}'),
            links: JSON.parse('{{ edges_json|safe }}'),
            roam: true,
            draggable: false,
            force: {
                repulsion: 1000,
                gravity: 0.1,
                edgeLength: [100, 300],
                layoutAnimation: true
            },
            emphasis: {
                focus: 'adjacency',
                lineStyle: {
                    width: 10
                }
            },
            label: {
                show: true,
                position: 'right'
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                fontSize: 12
            },
            lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0
            }
        }]
    };

    // 设置图表配置
    chart.setOption(option);

    // 响应窗口大小变化
    window.addEventListener('resize', function() {
        chart.resize();
    });

    // 双击节点时跳转到设备详情页
    chart.on('dblclick', function(params) {
        if (params.dataType === 'node') {
            var nodeId = params.data.id;
            if (nodeId.startsWith('device_')) {
                var deviceId = nodeId.replace('device_', '');
                window.location.href = '/devices/' + deviceId + '/';
            } else if (nodeId.startsWith('rack_')) {
                var rackId = nodeId.replace('rack_', '');
                window.location.href = '/racks/' + rackId + '/';
            }
        }
    });
});
</script>
{% endblock %} 